<template>
  <div class="Column_left_dlog">
    <!-- 循环组件 -->
    <div class="Column_left_dlog_datas" v-for="item in lists" :key="item.title">
      <img :src="item.images" alt />
      <span class="title">{{ item.title }}</span>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Column_left_dlog",
  data() {
    return {
      lists: [
        {
          title: "图书秒杀",
          images: require("../images/xb1.png"),
        },
        {
          title: "教育团购",
          images: require("../images/xb2.png"),
        },
        {
          title: "厂商通道",
          images: require("../images/xb3.png"),
        },
        {
          title: "书点卡值",
          images: require("../images/xb4.png"),
        },
        {
          title: "图书换新",
          images: require("../images/xb5.png"),
        },
        {
          title: "书点充值",
          images: require("../images/xb6.png"),
        },
      ],
    };
  },
  created() {
    this.todatas();
  },
  // 方法
  methods: {
    todatas() {
      axios
        .get("/data.json")
        // 赋值
        .then((response) => {
          // this.lists = response.data;
          console.log(this.lists);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style>
.Column_left_dlog {
  width: 100%;
  height: 100%;
  background-color: rgb(95, 87, 88);
  /* display: flex; */
}
.Column_left_dlog .Column_left_dlog_datas {
  float: left;
  width: 33%;
  height: 50%;
  /* background-color: rgb(213, 231, 195); */
  outline: 1px solid rgb(105, 97, 98);
}
.Column_left_dlog .Column_left_dlog_datas img {
  width: 25px;
  height: 25px;
  color: #c9c4c0;
  padding-left: 30px;
  padding-top: 20px;
}
.Column_left_dlog .Column_left_dlog_datas .title {
  padding-left: 10px;
  font-size: 10px;
  color: #b6b2ae;
  padding-left: 18px;
}
.Column_left_dlog .Column_left_dlog_datas .title:hover {
  color: #ffffff;
}
</style>